<template>
  <div class="container">
    <div class="topBanner"><img src="@/assets/logoxhw.png" alt="" /></div>
    <div class="taskSelect">
      <div class="enrollBox" @click="$router.push('/addProblem')">
        <img src="@/assets/组 5843.png" alt="" />
        <div class="title">隐患登记</div>
        <div class="subTitle">填写上传相关隐患信息</div>
        <div class="btnBoxContainer">
          <div class="btnBox">去登记 ></div>
        </div>
      </div>
      <div class="enrollBox" @click="$router.push('/toDoList')">
        <img src="@/assets/组 5844.png" alt="" />
        <div class="title">
          我的待办 <span v-if="toNum != 0" class="numStyle">{{ toNum }}</span>
        </div>
        <div class="subTitle">整改、验收隐患信息</div>
        <div class="btnBoxContainer">
          <div class="btnBox btnBox2">查看 ></div>
        </div>
      </div>
    </div>
    <div class="highlight">隐患任务</div>

    <div class="selectBox">
      <div class="leftSelect">
        <div
          @click="chooseItem(0)"
          :class="{ selected: activeItem === 0 }"
          class="selectItem"
        >
          全部隐患
        </div>
        <div
          @click="chooseItem(1)"
          :class="{ selected: activeItem === 1 }"
          class="selectItem"
        >
          待整改
        </div>
        <div
          @click="chooseItem(2)"
          :class="{ selected: activeItem === 2 }"
          class="selectItem"
        >
          已整改
        </div>
      </div>
      <div class="selectItem selectItem2" @click="chooseDate">
        {{ formDate }}<van-icon name="arrow-down" />
      </div>
    </div>

    <div class="taskList">
      <div v-if="problemList.length == 0">
        <van-empty description="暂无数据" />
      </div>
      <div
        class="taskItem"
        v-for="item in problemList"
        :key="item.id"
        @click="goDetail(item)"
      >
        <div class="taskStatus" v-if="item.changeStatus == 1">
          {{ item.changeStatusName }}
        </div>
        <div class="taskStatus greenColor" v-if="item.changeStatus == 2">
          {{ item.changeStatusName }}
        </div>
        <div class="taskLeft">
          <img :src="item.dangerImg1" alt="" />
        </div>
        <div class="taskRight">
          <div class="taskTitle">{{ item.dangerName }}</div>
          <div class="taskSubTitle">
            {{ item.dangerDescribe }}
          </div>
          <div class="taskLabel">
            <div class="taskLabelItem">{{ item.dangerGradeName }}</div>
            <div class="taskLabelItem">{{ item.governKindName }}</div>
          </div>
          <div class="taskDate">登记时间:{{ item.createdTime }}</div>
        </div>
      </div>
    </div>

    <tabbar :activeIndex.sync="nowActive"></tabbar>

    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirmDate"
        @cancel="cancelShowPicker"
      />
    </van-popup>
  </div>
</template>

<script>
import tabbar from '@/components/tabbar'
import { homePageApi } from '@/api/index'
export default {
  name: 'indexPage',
  props: {},
  components: {
    tabbar,
  },
  data() {
    return {
      nowActive: 0,
      minDate: new Date(2024, 0, 1),
      maxDate: new Date(2029, 10, 1),
      currentDate: '请选择时间',
      formDate: '请选择时间',
      searchDate: '',
      showPicker: false,
      activeItem: 0,
      problemList: [
        {
          dangerName: '隐患名称如某路段凹陷隐患',
          dangerDescribe: '隐患描述如1幢3号路口有发生路面凹陷情况,更多...',
          changeStatusName: '待整改',
          createdTime: '2025-03-21',
          dangerGradeName: '一般隐患',
          governKindName: '即查即改',
          dangerImg1: require('@/assets/微信图片_20250321142511.png'),
        },
      ],
      toNum: '',
    }
  },
  created() {
    this.getHomePageData()
  },
  methods: {
    chooseItem(e) {
      console.log(e)
      this.activeItem = e
      this.formDate = '请选择时间'
      this.searchDate = ''
      this.getHomePageData()
    },
    chooseDate() {
      this.showPicker = true
    },
    confirmDate(e) {
      this.formDate = this.formatDate(e).slice(0, 7)
      this.searchDate = this.formatDate(e).slice(0, 7)
      this.showPicker = false
      this.getHomePageData()
    },
    formatDate(date) {
      // console.log(date)
      // 获取年、月、日、时、分、秒
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要加1
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0') // 获取小时
      const minutes = String(date.getMinutes()).padStart(2, '0') // 获取分钟
      const seconds = String(date.getSeconds()).padStart(2, '0') // 获取秒
      // 拼接成目标格式
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    goDetail(item) {
      this.$router.push({
        path: '/problemDetail',
        query: {
          id: item.id,
        },
      })
    },
    cancelShowPicker() {
      this.showPicker = false
      this.formDate = '请选择时间'
      this.searchDate = ''
      this.getHomePageData()
    },
    async getHomePageData() {
      const res = await homePageApi({
        id: JSON.parse(sessionStorage.getItem('loginInfo')).userId,
        createdTime: this.searchDate,
        changeStatus: this.activeItem == 0 ? '' : this.activeItem,
        changeOrResponer: '',
      })
      this.problemList = res.data.envirHiddenDangerList
      this.toNum = res.data.num
      console.log(res)
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.container {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #e6f8ee 0%, #f5f7f6 100%);
  padding: 0 15px;
  box-sizing: border-box;
}
.topBanner {
  margin: 0 auto;
  padding: 30px 0;
  text-align: center;
  img {
    width: 85px;
    height: 16px;
  }
}
.taskSelect {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  .enrollBox {
    width: 48%;
    height: 172px;
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
    img {
      padding-top: 18px;

      width: 48px;
      height: 48px;
    }
    .title {
      font-size: 14px;
      font-weight: bold;
      color: #3a3d3c;
      margin: 8px 0;
      .numStyle {
        display: inline-block;
        width: 16px;
        height: 16px;
        background-color: #ef0000;
        border-radius: 50%;
        color: #fff;
        line-height: 16px;
        text-align: center;
        margin-left: 4px;
        font-size: 10px;
      }
    }
    .subTitle {
      font-size: 10px;
      color: #939c98;
    }
    .btnBoxContainer {
      padding-top: 12px;
      display: flex;
      justify-content: center;
      font-size: 12px;
    }
    .btnBox {
      border: 1px solid #4bb98d;
      width: 76px;
      height: 28px;
      text-align: center;
      line-height: 28px;
      color: #4bb98d;
      border-radius: 28px;
    }
    .btnBox2 {
      border: 1px solid #e95500;
      width: 76px;
      height: 28px;
      text-align: center;
      line-height: 28px;
      color: #e95500;
      border-radius: 28px;
    }
  }
}
.highlight {
  display: inline-block;
  position: relative;
  padding-left: 10px; /* 调整文本与颜色条之间的间距 */
  font-weight: bold;
}

.highlight::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 2px;
  transform: translateY(-50%);
  width: 3px; /* 颜色条的宽度 */
  height: 14px; /* 颜色条的高度 */
  background-color: #00bfa5; /* 颜色条的颜色 */
}
.selectBox {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  font-size: 12px;
  color: #616463;
  .leftSelect {
    display: flex;
  }
  .selectItem {
    // width: 68px;
    padding: 5px 10px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    background-color: #fff;
    border-radius: 5px;
    margin-right: 12px;
  }
  .selectItem2 {
    margin-right: 0;
  }
  .selected {
    background-color: #009c5e;
    color: #fff;
  }
}
.taskList {
  padding-top: 16px;
  padding-bottom: 50px;
  .taskItem {
    height: 108px;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 12px;
    position: relative;
    margin-bottom: 12px;
    .taskStatus {
      position: absolute;
      right: 0;
      top: 0;
      background-color: #00b9c7;
      width: 52px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      color: #fff;
      border-radius: 0 8px 0 8px;
      font-size: 12px;
    }
    .greenColor {
      background-color: #00b66e;
      color: #fff;
    }
    .taskLeft {
      img {
        width: 80px;
        height: 80px;
      }
    }
    .taskRight {
      margin-left: 10px;
      .taskTitle {
        font-size: 14px;
        font-weight: bold;
        color: #3a3d3c;
      }
      .taskSubTitle {
        font-size: 10px;
        font-weight: bold;
        color: #616463;
        margin: 6px 0;
      }
      .taskLabel {
        display: flex;
        margin-bottom: 8px;
        .taskLabelItem {
          width: 48px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          background-color: #f1f5f3;
          font-size: 10px;
          margin-right: 10px;
        }
      }
      .taskDate {
        font-size: 10px;
        font-weight: bold;
        color: #939c98;
      }
    }
  }
}
</style>
